{% extends "base.html" %}

{% block title %}仪表板 - 后台管理系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">仪表板</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
                <i class="fas fa-refresh"></i> 刷新数据
            </button>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats h-100">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">总用户数</h5>
                        <span class="h2 font-weight-bold mb-0">{{ stats.total_users or 0 }}</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-primary rounded-circle shadow">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-sm">
                    <span class="h3 text-warning mr-2">+{{ stats.today_new_users or 0 }}</span>
                    <span class="text-nowrap">今日新增</span>
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats-success h-100">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">总积分</h5>
                        <span class="h2 font-weight-bold mb-0">{{ "{:,}".format(stats.total_points or 0) }}</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-success rounded-circle shadow">
                            <i class="fas fa-coins fa-2x"></i>
                        </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-sm">
                    <span class="text-nowrap">系统总积分</span>
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats-warning h-100">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">今日营收</h5>
                        <span class="h2 font-weight-bold mb-0">¥{{ "%.2f"|format(stats.today_revenue or 0) }}</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-warning rounded-circle shadow">
                            <i class="fas fa-chart-line fa-2x"></i>
                        </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-sm">
                    <span class="text-nowrap">总营收: ¥{{ "%.2f"|format(stats.total_revenue or 0) }}</span>
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-stats-danger h-100">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-uppercase text-muted mb-0">待支付订单</h5>
                        <span class="h2 font-weight-bold mb-0">{{ stats.pending_orders or 0 }}</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-white text-danger rounded-circle shadow">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
                <p class="mt-3 mb-0 text-sm">
                    <span class="text-nowrap">需要处理</span>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- 快捷操作 -->
<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">快捷操作</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('add_user') }}" class="btn btn-primary">
                        <i class="fas fa-user-plus me-2"></i>添加新用户
                    </a>
                    <a href="{{ url_for('users') }}" class="btn btn-outline-primary">
                        <i class="fas fa-users me-2"></i>查看所有用户
                    </a>
                    <a href="{{ url_for('points') }}" class="btn btn-outline-success">
                        <i class="fas fa-coins me-2"></i>积分管理
                    </a>
                    <a href="{{ url_for('revenue') }}" class="btn btn-outline-warning">
                        <i class="fas fa-chart-bar me-2"></i>营收报表
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">系统信息</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <strong>当前时间：</strong>
                        <span id="current-time"></span>
                    </li>
                    <li class="mb-2">
                        <strong>登录用户：</strong>
                        {{ session.admin_user }}
                    </li>
                    <li class="mb-2">
                        <strong>系统版本：</strong>
                        v1.0.0
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 更新当前时间
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleString('zh-CN');
        document.getElementById('current-time').textContent = timeString;
    }
    
    updateTime();
    setInterval(updateTime, 1000);
</script>
{% endblock %}